<template lang="pug">
div
  app-header(fixed,back,title="地址管理",v-if="!$helper.isWechat")
  div.lists
    .toolbar
      a(@click="popupVisible = true") 添加地址
    div(ref="mainWrapper",class="main-wrapper")
       ul
          li(v-for="(item,index) in lists",:key="item.id",@click="updateHandler(item)")
            strong {{item.user_name}},{{item.tel_number}}
            span {{item.city_name}} {{item.detail_info}}
  mt-popup.add-address-box(v-model="popupVisible",position="right")
    mt-field(label="收获人",placeholder="姓名",v-model="addressForm.userName")
    mt-field(label="手机号码",placeholder="11位手机号",type="tel",v-model="addressForm.telNumber")
    mt-field(label="地区信息",placeholder="地区信息",v-model="addressForm.cityName")
    mt-field(label="详细地址",placeholder="街道门牌信息",v-model="addressForm.detailInfo")
    mt-field(label="邮政编码",placeholder="邮政编码",v-model="addressForm.postalCode")
    .save-submit-group
      mt-button.read-wx(@click="readWxHandler",v-if="$helper.isWechat&&!addressForm.id") 微信读取
      mt-button.save-submit(@click="submitHandler") 保存
      mt-button.del-btn(@click="delHandler",v-if="addressForm.id") 删除
</template>

<script>
import { Toast, Button, Popup, Field } from 'mint-ui'
import Header from 'components/Header'
export default {
  components: {
    'mt-button': Button,
    'app-header': Header,
    'mt-popup': Popup,
    'mt-field': Field
  },
  data () {
    return {
      popupVisible: false,
      lists: [],
      addressForm: {
        id: null,
        userName: '',
        telNumber: '',
        cityName: '',
        detailInfo: '',
        postalCode: ''
      }
    }
  },
  watch: {
    popupVisible: async function (val, oldval) {
      if (val === false) {
        await this.clearData()
      }
    }
  },
  async created () {
    await this.loadAddressLists()
  },
  methods: {
    readWxHandler () {
      const then = this
      window.wx.openAddress({
        success (res) {
          then.addressForm.userName = res.userName
          then.addressForm.telNumber = res.telNumber
          then.addressForm.cityName = res.provinceName + res.cityName + res.countryName
          then.addressForm.detailInfo = res.detailInfo
          then.addressForm.postalCode = res.postalCode
        }
      })
    },
    async loadAddressLists () {
      const result = await this.$rpc.invoke('address_lists', []).complete()
      if (result.code) {
        return Toast(result.message)
      }
      this.lists = result.data
    },
    updateHandler (model) {
      this.addressForm.id = model.id
      this.addressForm.userName = model.user_name
      this.addressForm.telNumber = model.tel_number
      this.addressForm.cityName = model.city_name
      this.addressForm.detailInfo = model.detail_info
      this.addressForm.postalCode = model.postal_code
      this.popupVisible = true
    },
    async delHandler () {
      const result = await this.$rpc.invoke('address_del', [
        this.addressForm.id
      ]).complete()
      if (result.code) {
        return Toast(result.message)
      } else {
        this.popupVisible = false
      }
    },
    async clearData () {
      this.addressForm.id = null
      this.addressForm.userName = ''
      this.addressForm.telNumber = ''
      this.addressForm.cityName = ''
      this.addressForm.detailInfo = ''
      this.addressForm.postalCode = ''
      await this.loadAddressLists()
    },
    async submitHandler () {
      const result = await this.$rpc.invoke('address_save', [
        this.addressForm.id,
        this.addressForm.userName,
        this.addressForm.telNumber,
        this.addressForm.cityName,
        this.addressForm.detailInfo,
        this.addressForm.postalCode,
        0
      ]).complete()
      if (result.code) {
        return Toast(result.message)
      }
      Toast('保存成功')
      this.popupVisible = false
    }
  }
}
</script>
<style lang="stylus" scoped>
.toolbar
  padding: .3rem .2rem
  border-bottom: 1px solid #ccc
  box-sizing: border-box
  text-align: right;
  a
    font-size: .36rem
    cursor: pointer
.add-address-box
  position: absolute
  left: 0
  right: 0
  display: block
  padding-bottom: .5rem
  .save-submit-group
    text-align: center
    .save-submit
      width: 2rem
    .read-wx
      margin-right: .4rem
    .del-btn
      margin-left: .4rem
.main-wrapper ul
  li
    border-bottom: 1px solid #ccc
    padding-left: .4rem
    box-sizing: border-box
    font-size: .36rem
    padding-top: .3rem
    padding-bottom: .3rem
  strong
    width: 100%
    display: inline-block
  span
    width: 100%
    display: inline-block
</style>
